<template>
  <el-dialog title="添加角色" :visible.sync="visible">
    <el-form
      :model="roleForm"
      :rules="rules"
      ref="roleForm"
      label-width="80px"
      class="demo-ruleForm"
      label-position="right"
    >
      <el-form-item label="角色名称" prop="role_name">
        <el-input v-model="roleForm.role_name"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="role_desc">
        <el-input v-model="roleForm.role_desc"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="addRole()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getRoleList, addRole } from "@/api/role";

export default {
  name: "AddRoleDialog",
  data() {
    var check_role_name = (rule, value, callback) => {
      //   检查是否重了
      if (value === "") {
        callback(new Error("请输入角色名称"));
      } else if (this.checkRoleName(value)) {
        callback(new Error("该角色已存在"));
      } else if (value.length < 3 || value.length > 10) {
        callback(new Error("长度在 3 到 10 个字符"));
      } else {
        //这个必须写 必须具备else
        callback();
      }
    };
    return {
      visible: false,
      roleForm: {
        role_name: "",
        role_desc: "",
      },
      excitedRoleList: [],
      rules: {
        role_name: [
          { required: true, validator: check_role_name, trigger: "blur" },
        ],
        role_desc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    //获取数据用于检验重复
    getRoleList().then((res) => {
      this.excitedRoleList = res.data.data;
    });
  },
  mounted() {
    this.$bus.$on("visibleAddRoleDialog", (flag) => {
      this.visible = flag;
      //清空
      Object.assign(this.roleForm, this.$options.data().roleForm);
      //清空提示消息
      this.$nextTick(() => {
        this.$refs.roleForm && this.$refs.roleForm.clearValidate();
      });
    });
  },
  methods: {
    // 名字重复
    checkRoleName(value) {
      // console.log(value);
      // console.log(this.excitedRoleList);
      let nameRecept = this.excitedRoleList.some((item) => {
        if (item.role_name === value) {
          return true;
        }
      });
      return nameRecept;
    },
    //添加
    addRole() {
      this.$refs.roleForm.validate((valid) => {
        if (valid) {
          addRole(this.roleForm).then(
            (res) => {
              if (res.data.status !== 200) {
                return this.$message.error("添加失败!");
              }
              this.$message.success("添加成功!");
              this.visible = false;
              //刷新
              this.$bus.$emit("refreshRoleList");
            },
            (err) => {
              console.log(err);
              this.$message.error("添加失败!");
            }
          );
        }
      });
    },
  },
};
</script>

<style  scoped>
</style>
